/* =====================================================
BASE STYLES: Variables, Reset, Typography
Extracted from catalog.html for Phase 3.2
===================================================== */

/* CSS Custom Properties - Stripe UltraClean Tokens */
:root {
            /* Color Palette */
    --bg-light: #FFFFFF;
    --bg-dark: #0A0A0C;
    --surface: #F6F7FB;
    --card: #FFFFFF;
    --text-primary: #0D0D0D;
    --text-secondary: #5E5E6A;
            
            /* Brand colors - Now loaded dynamically from database via brand-config-loader.js */
            /* Removed hardcoded colors to allow branding system to apply them */
    --brand-teal: #6B7280;        /* Neutral gray default - will be overridden by branding loader */
    --brand-yellow: #6B7280;      /* Neutral gray default - will be overridden by branding loader */
    --accent-blue: #6B7280;       /* Neutral gray default - will be overridden by branding loader */
    --brand-primary: #6B7280;     /* Neutral gray default - will be overridden by branding loader */
    --brand-secondary: #6B7280;   /* Neutral gray default - will be overridden by branding loader */
    --brand-accent: #6B7280;      /* Neutral gray default - will be overridden by branding loader */
            
    --border: rgba(0, 0, 0, 0.08);
    --shadow: rgba(0, 0, 0, 0.10);
            
            /* Gradients - Now generated dynamically by branding loader */
    --gradient-primary: linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%);  /* Neutral default */
    --gradient-accent: linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%);   /* Neutral default */
            
            /* Glassmorphism - Orange/Yellow accent gradient background (glassier, lighter) */
    --glass-bg-gradient: linear-gradient(135deg, 
    rgba(255, 251, 240, 0.98) 0%, 
    rgba(255, 248, 230, 0.98) 12%, 
    rgba(255, 245, 220, 0.98) 25%, 
    rgba(255, 242, 215, 0.98) 37%, 
    rgba(255, 250, 238, 0.98) 50%, 
    rgba(255, 247, 228, 0.98) 62%, 
    rgba(255, 244, 222, 0.98) 75%, 
    rgba(255, 249, 235, 0.98) 87%, 
    rgba(255, 251, 240, 0.98) 100%);
            
            /* Glass effect properties - Enhanced for glassier look */
    --glass-bg: rgba(255, 255, 255, 0.5);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-blur: blur(12px);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
            
            /* Stripe Motion - Signature Easing Curve */
    --ease-stripe: cubic-bezier(0.16, 1, 0.3, 1);
            
            /* Spacing Scale (4px increments) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
            
            /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;
}

* {
box-sizing: border-box;
            /* Prevent text selection which can trigger zoom on mobile */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
            /* Prevent all touch gestures that could cause zoom */
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}

/* Allow text selection for input fields and text areas */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

html, body {
    overflow-x: hidden;
    max-width: 100vw;
            /* Prevent pinch zoom and double-tap zoom */
    touch-action: manipulation;
            /* Disable zoom gestures completely */
    -ms-touch-action: manipulation;
    -webkit-user-zoom: fixed;
    -moz-user-zoom: fixed;
    -ms-user-zoom: fixed;
    user-zoom: fixed;
            /* Prevent iOS double-tap zoom */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
            /* FORCE CLEAN WHITE BACKGROUND - NO COLORS */
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
            /* FORCE CLEAN WHITE BACKGROUND - NO COLORS */
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
    /* Account for fixed header: header-container (56px) + category-filter-container (~72px when visible) + bottom nav bar (68px) + safe areas */
    /* Category filter is only visible on Products tab, so padding adjusts dynamically */
    padding-top: calc(56px + 72px + env(safe-area-inset-top, 0px)); /* Header (56px) + Category filter (48px button + 24px padding) - default for Products tab */
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 12px);
}

/* Adjust body padding when category filter is hidden (non-Products tabs) */
body:has(.category-filter-container.hidden),
body:not(:has(.category-filter-container:not(.hidden))) {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)); /* Only header, no category filter */
}

/* Fallback for browsers that don't support :has() - use class-based approach */
body.category-filter-hidden {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
            /* Prevent zoom on body */
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    /* Ensure body content is scrollable above nav bar */
    overflow-x: hidden;
    overflow-y: auto;
}

/* Force white background on main element */
main {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* =====================================================
GLOBAL ZOOM PREVENTION FOR ALL INTERACTIVE ELEMENTS
===================================================== */
button, 
a, 
[role="button"], 
.add-btn, 
.quantity-control, 
.quantity-btn,
.category-filter,
input[type="button"],
input[type="submit"] {
            /* Prevent all zoom gestures on interactive elements */
    touch-action: manipulation !important;
    -ms-touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
}

/* Allow text selection in inputs and textareas */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    touch-action: manipulation;
}


/* Typography Scale */
h1 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0;
}

h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0;
}

h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0;
}

p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0;
}